<template>
  <div class="upload-imag" ref="uploadImageRef" :class="{ 'upload-margin': margin }">
    <div class="upload-cont">
      <div v-if="isEmpty" class="empty-block">
        <icon-empty />
        <div class="text">暂无数据</div>
      </div>
      <a-upload v-else :file-list="defaultFileList" :disabled="disabled" image-preview list-type="picture-card" show-preview-button>
        <template #upload-item="{ fileItem, index }">
          <div class="u-img-item upload-item" :class="{ m_br: single == false }" :key="index" style="margin-right: 12px">
            <a-image :class="`image-${fileItem.uid}`" :src="fileItem.url" width="103" height="77" fit="scale-down">
              <template #loader>
                <img
                  width="130"
                  height="77"
                  style="border: 1px solid #e5e6eb; display: block; width: 100%; height: 100%"
                  :src="imgLoading"
                />
              </template>
            </a-image>
            <div class="action">
              <div class="btn" @click.stop="previewFn(index)"><icon-eye /><span class="text">查看</span> </div>
            </div>
          </div>
        </template>
      </a-upload>
    </div>
    <a-image-preview-group v-model:visible="previewVisible" v-model:current="previewCurrent" :maskClosable="false" :srcList="previewList" />
  </div>
</template>

<script setup lang="ts">
  import { ref, computed, watch, nextTick } from 'vue'
  import { loopImgLoadInOrder } from './scripts/img-load'
  import imgLoading from '@/assets/img-loading.png'
  const disabled = ref(true)
  const props = defineProps({
    disabled: Boolean,
    single: Boolean,
    margin: Boolean,
    fileList: {
      type: Array,
      default: () => [],
    },
  })
  const isEmpty = computed(() => {
    if (props.fileList.length == 0) {
      return true
    }
    return false
  })
  // 容器
  const uploadImageRef = ref(null)
  // 图片地址
  const defaultFileList = ref([])
  // 初始化
  watch(
    props.fileList,
    (newValue) => {
      if (newValue.length > 0) {
        defaultFileList.value = newValue.map((url, index) => {
          return {
            uid: index,
            url: imgLoading,
            'data-url': url,
          }
        })

        // 图片加载器
        nextTick(() => {
          loopImgLoadInOrder(uploadImageRef.value, defaultFileList.value)
        })
      }
    },
    { immediate: true }
  )

  // 预览
  const previewVisible = ref(false)
  const previewCurrent = ref(0)
  const previewFn = (index) => {
    previewCurrent.value = index
    previewVisible.value = true
  }
  const previewList = computed(() => {
    return defaultFileList.value.map((item) => item['data-url'] || item.url)
  })
</script>

<style lang="less" scoped>
  .upload-imag {
    display: inline-block;
    background: #ffffff;
    &.upload-margin {
      margin-top: 20px;
      margin-right: 20px;
    }
    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 20px;
      line-height: 20px;
      background: #e5e6eb;
      font-size: 12px;
      font-weight: 400;
      color: #1d2129;
    }
  }
  :deep(.arco-upload-list.arco-upload-list-type-picture-card) {
    flex-wrap: warp;
  }

  .tooltip-btn {
    margin-left: 8px;
    font-weight: 400;
    font-size: 12px;
    color: #165dff;
    line-height: 22px;
    cursor: pointer;
  }
  .upload-cont {
    &.upload-card {
      padding: 4px;
      border: 1px solid #e5e6eb;
      min-width: 114px;
      min-height: 88px;
    }
    .empty-block {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 103px;
      height: 77px;
      background: #f2f3f5;
      border-radius: 2px;
      border: 1px solid #e5e6eb;
      text-align: center;
      color: #b6b6b6;
      font-size: 32px;
      .text {
        font-size: 12px;
        font-weight: 400;
        color: #d8d8d8;
        line-height: 20px;
      }
    }
  }

  .upload-item {
    width: 103px;
    height: 77px;
    &.m_br {
      margin: 0 4px 4px 0;
    }
  }

  .u-img-item {
    position: relative;
    font-size: 12px;
    font-weight: 400;
    color: #ffffff;
    line-height: 22px;

    &:hover {
      .action {
        display: flex;
      }
    }
    .action {
      display: none;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 1;
      justify-content: center;
      align-content: center;
      flex-wrap: wrap;
      border-radius: 0px 0px 2px 2px;
      background: rgba(0, 0, 0, 0.5);
      cursor: pointer;
      :hover {
        background: rgba(0, 0, 0, 0.2);
      }
      .btn {
        width: 100%;
        height: 22px;
        text-align: center;
        .text {
          margin-left: 3px;
        }
      }
    }
  }

  .upload-block {
    text-align: center;
    padding-top: 12px;
    background: #f2f3f5;
    border: 1px solid #e5e6eb;
    border-radius: 2px;
    .text {
      margin-top: 5px;
      font-size: 12px;
      font-weight: 400;
      color: #1d2129;
      line-height: 15px;
    }
    font-size: 12px;
    font-weight: 400;
    color: #86909c;
    line-height: 20px;
  }
  :deep(.arco-upload-disabled) {
    display: none;
  }
</style>
